<!DOCTYPE html>
<html lang="zh-cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
    <script src="js/bootstrap.min.js" charset="UTF-8"></script>
    <script src="js/swiper.min.js" charset="UTF-8"></script>
    <script src="js/global.js" charset="UTF-8"></script>
    <script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
    <title>农资商贸销售系统</title>
</head>
<body>
<!-- 顶部tab -->
<div th:replace="~{mall/common :: header}"></div>

<!-- 顶部标题 -->
<div class="bgf5 clearfix">
    <div class="top-user">
        <div class="inner">
            <a style="left: -22px;top: 15px;width: 246px;height: 188px;" class="logo" href="index"><img src="images/icons/logo.png" alt="农资商贸销售系统" class="cover"></a>
            <div class="title">个人中心</div>
        </div>
    </div>
</div>
<div class="content clearfix bgf5">
    <section class="user-center inner clearfix">
        <div class="pull-left bgf">
            <a href="index"><span class="title">农资商城销售系统</span></a>
            <dl class="user-center__nav">
                <dt>帐户信息</dt>
                <a href="userSetting">
                    <dd>个人资料</dd>
                </a>
                <a href="userAddress">
                    <dd>收货地址</dd>
                </a>
                <a href="userUpdatePwd">
                    <dd>修改登录密码</dd>
                </a>
            </dl>
            <dl class="user-center__nav">
                <dt>订单中心</dt>
                <a href="userOrder">
                    <dd class="active">我的订单</dd>
                </a>
            </dl>
        </div>
        <div class="pull-right">
            <div class="user-content__box clearfix bgf">
                <div class="title">订单中心-我的订单</div>
                <div class="order-list__box bgf">
                    <div class="order-panel">
                        <ul class="nav user-nav__title" role="tablist">
                            <li role="presentation" class="nav-item active"><a href="#all" aria-controls="all"
                                                                               role="tab" data-toggle="tab">所有订单</a>
                            </li>
                        </ul>

                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane fade in active" id="all">
                                <table class="table text-center">
                                    <tr>
                                        <th width="380">商品信息</th>
                                        <th width="85">单价</th>
                                        <th width="85">数量</th>
                                        <th width="120">实付款</th>
                                        <th width="120">交易状态</th>
                                        <th width="120">交易操作</th>
                                    </tr>
                                    <tr class="order-item" th:each="order : ${orderList}">
                                        <td>
                                            <label>
                                                <a class="num" th:text="${'订单号：' + order.orderid }">
                                                </a>
                                                <div class="card" th:each="rderdetails : ${order.children}">
                                                    <div class="img">
                                                        <img th:src="${rderdetails.img}" th:alt="${rderdetails.goodsname}" class="cover">
                                                    </div>
                                                    <div class="name ep2" th:text="${rderdetails.goodsname}"></div>
                                                    <div class="format" th:text="${rderdetails.describe}"></div>
                                                </div>
                                            </label>
                                        </td>
                                        <td>
                                            <label>
                                                <div class="card" th:each="rderdetails : ${order.children}">
                                                    <div class="name ep2" th:text="${'￥'+rderdetails.goodsprice}"></div>
                                                </div>
                                            </label>
                                        </td>
                                        <td>
                                            <label>
                                                <div class="card" th:each="rderdetails : ${order.children}">
                                                    <div class="name ep2" th:text="${rderdetails.num}"></div>
                                                </div>
                                            </label>
                                        </td>
                                        <td>
                                            <label>
                                                <div class="card" th:each="rderdetails : ${order.children}">
                                                    <div class="name ep2" th:text="${'￥'+rderdetails.sumprice}"></div>
                                                </div>
                                            </label>
                                        </td>
                                        <td class="state">
                                            <a class="but c6" th:text="${order.state==1 ? '等待付款' : order.state==2 ? '已付款' : order.state==3 ? '待签收' :'交易完成' }"></a>
                                        </td>
                                        <td class="order">
                                            <a th:href="@{'userCartPay?id=' + ${order.id}}" th:if="${order.state==1}" class="but but-primary">立即付款</a>
                                            <a th:if="${order.state==2}" class="but but-primary">待商家发货</a>
                                            <a th:if="${order.state==3}" onclick="confirmOrder(this)" th:data-id="${order.id}" class="but but-primary">确认收货</a>
                                            <a th:if="${order.state==4}" th:href="@{'userComment?id=' + ${order.id}}" class="but but-primary">评价</a>
                                            <a th:if="${order.state==5}" class="but but-primary">交易完成</a>
                                            <a class="but c3" onclick="deleteOrder(this)" th:data-id="${order.id}" th:text="删除订单"></a>
                                        </td>
                                    </tr>
                                </table>
                                <script>
                                    //删除订单
                                    function deleteOrder(obj) {
                                        let id = $(obj).attr("data-id");
                                        if (!id) {
                                            DJMask.open({
                                                width: "300px",
                                                height: "100px",
                                                content: "未获取到数据，请刷新页面试试！！！"
                                            })
                                            return false;
                                        }
                                        $.ajax({
                                            type: "POST",
                                            url: "/mall/order/delete",
                                            data: {id},
                                            success: function (res) {
                                                if (res.code === 200) {
                                                    DJMask.open({
                                                        width: "300px",
                                                        height: "100px",
                                                        content: res.msg
                                                    })
                                                    //倒计时一秒刷新当前页面
                                                    setTimeout(function () {
                                                        window.location.reload();
                                                    }, 1000);
                                                } else  if (res.code === 401){
                                                    DJMask.open({
                                                        width: "300px",
                                                        height: "100px",
                                                        content: res.msg+"，将在三秒后自动跳转到登录页面"
                                                    })
                                                    //倒计时三秒跳转到登录页面
                                                    setTimeout(function () {
                                                        window.location.href="/mall/login";
                                                    }, 3000);
                                                }else{
                                                    DJMask.open({
                                                        width: "300px",
                                                        height: "100px",
                                                        content: res.msg
                                                    })
                                                }
                                            },
                                            error: function (res) {
                                                DJMask.open({
                                                    width: "300px",
                                                    height: "100px",
                                                    content: "网络繁忙，请稍后再试！！！"
                                                })
                                            }
                                        })
                                    }

                                    //确认收货
                                    function confirmOrder(obj) {
                                        let id = $(obj).attr("data-id");
                                        if (!id) {
                                            DJMask.open({
                                                width: "300px",
                                                height: "100px",
                                                content: "未获取到数据，请刷新页面试试！！！"
                                            })
                                            return false;
                                        }
                                        $.ajax({
                                            type: "POST",
                                            url: "/mall/order/update",
                                            data: {id,state:4},
                                            success: function (res) {
                                                if (res.code === 200) {
                                                    DJMask.open({
                                                        width: "300px",
                                                        height: "100px",
                                                        content: "确认收货成功"
                                                    })
                                                    //倒计时一秒刷新当前页面
                                                    setTimeout(function () {
                                                        window.location.reload();
                                                    }, 1000);
                                                } else  if (res.code === 401){
                                                    DJMask.open({
                                                        width: "300px",
                                                        height: "100px",
                                                        content: res.msg+"，将在三秒后自动跳转到登录页面"
                                                    })
                                                    //倒计时三秒跳转到登录页面
                                                    setTimeout(function () {
                                                        window.location.href="/mall/login";
                                                    }, 3000);
                                                }else{
                                                    DJMask.open({
                                                        width: "300px",
                                                        height: "100px",
                                                        content: res.msg
                                                    })
                                                }
                                            },
                                            error: function (res) {
                                                DJMask.open({
                                                    width: "300px",
                                                    height: "100px",
                                                    content: "网络繁忙，请稍后再试！！！"
                                                })
                                            }
                                        })
                                    }
                                </script>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
</div>

<!-- 右侧菜单 -->
<div th:replace="~{mall/common :: rightNav}"></div>
<!-- 底部信息 -->
<div th:replace="~{mall/common :: footer}"></div>
<link href="css/cropper/cropper.min.css" rel="stylesheet">
<link href="css/cropper/sitelogo.css" rel="stylesheet">
<script src="js/cropper/cropper.min.js"></script>
<script src="js/cropper/sitelogo.js"></script>


</body>
</html>